<template>
	<view class="page">
		<view
			style="background-color: #fff; padding: 40rpx; margin: 20rpx;border-radius: 20rpx;padding-top: 0; margin-top: 0;">
			<u--form :model="form" ref="uForm" :borderBottom="true" labelPosition="top" labelWidth="300">
				<!-- <u-form-item prop="name" label="姓名" label-width="100" :label-style="leftIconStyle" label-position="top" label-align="left">
					<u-input v-model="form.name" placeholder="请输入真实姓名" />
				</u-form-item> -->
				<view style="margin-bottom: 20rpx;">
					<u-form-item prop="mobile" :borderBottom="true" label="手机号" labelWidth="300"
						:label-style="leftIconStyle" label-align="left">
						<view style="margin-top: 10rpx;">
							<u--input border="none" v-model="form.mobile" placeholder="请输入手机号" />
						</view>
					</u-form-item>
				</view>
				<view style="margin-bottom: 20rpx;">
					<u-form-item prop="validate_code" :borderBottom="true" label="验证码" labelWidth="300"
						:label-style="leftIconStyle" label-align="left">
						<view style="margin-top: 10rpx;">
							<u--input border="none" v-model="form.validate_code" placeholder="请输入验证码" />
						</view>
						<view slot="right">
							<u-count-down ref="countDown" :time="60 * 1000" format="ss" :autoStart="false"
								@change="onChange" @finish="onFinish">
								<view class="time">
									<text v-if="showGetCode" @click="getCode" style="color: #E0190E; font-size: 28rpx;">{{codeTips}}</text>
									<text v-else style="color: #c9c9c9; font-size: 28rpx;">{{codeTips}}</text>
								</view>
							</u-count-down>
						</view>
						
						<!-- <text @tap="getCode" style="color: #962a22; font-size: 28rpx;" slot="right">{{codeTips}}</text> -->
					</u-form-item>
				</view>
				<view style="margin-bottom: 20rpx;">
					<u-form-item label="新密码" :borderBottom="true" labelWidth="300" :label-style="leftIconStyle"
						label-align="left">
						<view style="margin-top: 10rpx;">
							<u--input border="none" v-model="form.password" type="password" placeholder="请输入密码" />
						</view>
					</u-form-item>
				</view>
				<view style="margin-bottom: 20rpx;">
					<u-form-item label="确认密码" :borderBottom="true" labelWidth="300" :label-style="leftIconStyle"
						label-align="left">
						<view style="margin-top: 10rpx;">
							<u--input border="none" v-model="form.repassword" type="password" placeholder="请确认密码" />
						</view>
					</u-form-item>
				</view>
				<view style="margin-bottom: 20rpx;">
					<u-form-item prop="mobile" :borderBottom="true" label="推荐人手机号码" labelWidth="300"
						:label-style="leftIconStyle" label-align="left">
						<view style="margin-top: 10rpx;width: 100%;">
							<u--input border="none" v-model="form.recommend_mobile" placeholder="请输入推荐人手机号码" />
						</view>
					</u-form-item>
				</view>
			</u--form>
			
			<view style="margin-top: 90rpx;">
				<u-button @click="submit" shape="circle" color="linear-gradient(to left, #E0190E, #E0190E)" text="提交注册">
				</u-button>
			</view>
		</view>
		<!-- <u-loading mode="flower" size="100" :show="loadShow" style="display: flex;justify-content: center;align-items: center;"></u-loading> -->
	</view>
</template>

<script>
	import {
		authCode,
		getui
	} from '../../common/tool.api.js'
	import {
		register
	} from '../../common/auth.api.js'
	export default {
		data() {
			return {
				codeTips: '获取验证码',
				form: {
					name: '',
					mobile: '',
					// verification_code: '',
					validate_code: ''
				},
				leftIconStyle: {
					color: '#999'
				},

				showGetCode: true,
				seconds: 60,
				loadShow: true
			}
		},
		onLoad({
			name,
			mobileText
		}) {
			this.form.mobile = mobileText
			this.form.name = name
		},
		methods: {
			onChange(e) {
				if( e.seconds == 0){
					this.codeTips = "获取验证码";
				}else{
					this.codeTips = e.seconds + "秒后重新获取";
				}
			},
			onFinish(){
				this.$refs.countDown.reset();
				this.showGetCode = true
			},
			getCode() {
				uni.showLoading({
					title: '正在获取验证码'
				})
				
				if(!this.form.mobile){
					this.$u.toast('请输入手机号');
				}
				
				let __this = this;
				authCode({
					mobile: this.form.mobile,
				}).then(res => {
					uni.hideLoading()
					__this.$u.toast('验证码已发送');
					__this.$refs.countDown.start();
					__this.showGetCode = false
				})
			},
			submit() {
				uni.showLoading({
					title: '正在提交'
				})
				let __this = this;
				register({
					...this.form
				}).then(res => {
					uni.hideLoading()
					// #ifdef APP-PLUS
					let pinf = plus.push.getClientInfo();
					let cid = pinf && pinf.clientid || ''; //客户端标识
					plus.push.getClientInfoAsync((info) => {
						cid = info.clientid;
						getui({
							client_id: cid,
							system: uni.getSystemInfoSync().platform
						}).then(res => {
							console.log(res)
						})
					}, err => {});
					// #endif
					__this.$u.toast('注册成功');
					uni.$emit('updateUserInfo', {
						msg: '刷新用户信息'
					})
					uni.$u.route({
						url: 'pages/auth/mobileLogin',
					})

				})
			}
		}
	}
</script>


<style lang="scss">
	@import "../../static/iconfont.css";

	.page {
		background-color: #fff;
		min-height: 100Vh;
		width: 100vw;
	}

	.footer {
		margin-top: 32upx;
		font-size: 24upx;
		color: #666666;
		text-align: center;
		display: flex;
		justify-content: center;
	}

	// .leftIconStyle {
	// 	width: 30rpx;
	// 	height: 30rpx;
	// 	align-items: center;
	// }
</style>
